<template>
  <el-dialog
    v-el-drag-dialog="{updataFull,updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1200px')"
    :visible="visible"
    :title="$t('CHANNEL_DETAILS')"
    @open="open"
    @close="close"
  >
    <!-- 业务基本信息显示 -->
    <biz-info :form-data="rowData" />
    <!-- 主用通道 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item :title="$t('MAIN_CHANNEL') + ':'" name="main">
        <channel-list
          v-if="detailData.mainChannelList.length"
          show-type="main"
          operate-type="view"
          :show-check-box="false"
          :show-cutover-list="false"
          type="configed"
          :form-data="formData"
          :row-data="detailData.mainChannelList[0]"
        />
      </el-collapse-item>
    </el-collapse>
    <!-- 备用通道 -->
    <el-tabs v-model="activeName" type="card">
      <!-- 已配置备用通道 -->
      <el-tab-pane :label="$t('CONFIGED_BACKUP')" name="configed">
        <span slot="label">
          {{ $t('CONFIGED_BACKUP') }}
          <el-popover width="200" trigger="hover">
            <div class="text-color" v-html="$t('CONFIGED_BACKUP_TIPS')" />
            <i
              slot="reference"
              class="iconfont icon-AFSwenhao "
            />
          </el-popover>
        </span>
        <div v-if="detailData.backChannelList.length === 0" class="no-data">
          {{ $t('NO_CONFIGED_BACKUP') }}
        </div>
        <div v-for="(item, index) in detailData.backChannelList" :key="index">
          <channel-list
            class="mb-10"
            show-type="selected"
            :form-data="formData"
            :operate-type="operateType"
            :show-check-box="false"
            :show-cutover-list="false"
            :row-data="item"
            @reload="reload"
          />
        </div>
      </el-tab-pane>
      <!-- 新推荐备用通道 -->
      <el-tab-pane
        v-if="operateType === 'mod'"
        :label="$t('NEW_BACKUP')"
        name="new"
      >
        <span slot="label">
          {{ $t('NEW_BACKUP') }}
          <el-popover width="200" trigger="hover">
            <div class="text-color" v-html="$t('NEW_BACKUP_TIPS')" />
            <i
              slot="reference"
              class="iconfont icon-AFSwenhao"
            />
          </el-popover>
        </span>
        <recommend
          ref="recommended"
          class="mb-10"
          :form-data="formData"
          :row-data="rowData"
          operate-type="back"
          :show-check-box="false"
          :back-channel-id-list="backChannelIdList"
          @reload="reload"
        />
      </el-tab-pane>
    </el-tabs>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import backChannelApi from '@/api/oen/BackChannelApi'
  import { deepClone } from '@/utils/common'
  import Recommend from '../manager/components/Recommend'
  import ChannelList from '@/components/ChannelList'
  import BizInfo from '../manager/components/BizInfo'

  export default {
    components: { Recommend, ChannelList, BizInfo },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      operateType: {
        type: String,
        default: 'mod'
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        activeNames: ['main'],
        activeName: 'configed',
        selectedChannel: [],
        configuredBackup: [],
        detailData: {
          mainChannelList: [],
          backChannelList: []
        },
        needReload: false,
        configedPortsList: [],
        formData: {},
        backChannelIdList: [],
        isRecommended: false
      }
    },
    watch: {
      activeName(newVal) {
        console.log('newVal', newVal)
        // 只有第一次切换推荐tab才请求数据
        if (newVal === 'new' && !this.isRecommended) {
          this.$nextTick(() => {
            this.$refs.recommended && this.$refs.recommended.getRouteList('back')
            this.isRecommended = true
          })
        }
      }
    },
    methods: {
      open() {
        this.activeNames = ['main']
        this.activeName = 'configed'
        this.needReload = false
        this.isRecommended = false
        this.backChannelIdList = []
        console.log('this.rowData', this.rowData)
        const formData = {
          bizId: this.rowData.bizId,
          bizName: this.rowData.bizName,
          aStationId: this.rowData.startNodeId,
          aNodeId: this.rowData.startNodeId,
          zStationId: this.rowData.endStationId,
          zNodeId: this.rowData.endNodeId,
          aNodeData: this.rowData.startNode,
          zNodeData: this.rowData.endNode,
          aPortData: {},
          zPortData: {},
          aPortData2: {},
          zPortData2: {}
        }
        const firstData = this.rowData.bizChannelList[0]
        formData.aPortData.portId = firstData.startPortId
        formData.zPortData.portId = firstData.endPortId
        if (this.rowData.bizChannelList.length === 2) {
          const secondData = this.rowData.bizChannelList[1]
          formData.aPortData2.portId = secondData.startPortId
          formData.zPortData2.portId = secondData.endPortId
        }
        this.formData = { ...this.$options.data().formData, ...formData }
        this.getBackDetail()
      },
      // 获取备用详情
      getBackDetail(reload) {
        if (reload === true) {
          this.detailData.backChannelList = []
        } else {
          this.detailData = {
            mainChannelList: [],
            backChannelList: []
          }
        }
        this.configedPortsList = []
        backChannelApi
          .detail({
            bizId: this.rowData.bizId
          })
          .then(res => {
            if (!res) return
            this.detailData = {
              mainChannelList: this.formatData(res.mainChannelList),
              backChannelList: this.formatData(res.backChannelList, 'back')
            }
            this.formData.mainChannelList = res.mainChannelList
          })
      },
      // 拼装组合通道展示数据
      formatData(data, type) {
        this.backChannelIdList = []
        // 拼接组合数据：同链路数据拼接到一条里面
        const newList = []
        data.forEach(i => {
          // 设置链路唯一linkId 使用通道id拼接保证一定是唯一的
          i.linkId = i.segmentList.map(j => j.id).join()
          const theIndex = newList.findIndex(j => j.linkId === i.linkId)
          const item = deepClone(i)
          const channelLinkId = i.channelList.map(j => j.id).join()
          this.backChannelIdList.push(channelLinkId)
          const channelItem = {
            loss: i.loss,
            backId: i.backId,
            exclusive: i.exclusive ? 'EXCLUSIVE' : 'SHARE',
            segmentList: i.channelList
          }
          if (theIndex !== -1) {
            newList[theIndex].channelList.push(channelItem)
          } else {
            item.channelList = [channelItem]
            newList.push(item)
          }
        })
        // 同链路通道拼接完成，设置表单显示信息
        newList.forEach(z => {
          const configedPorts = []
          z.channelList.forEach(i => {
            i.segmentList.forEach((j, index) => {
              j.startPort.bizName = this.$utils.handleServiceI18n(
                j.startPort.bizName
              )
              j.endPort.bizName = this.$utils.handleServiceI18n(j.endPort.bizName)
              i['segmentList' + index] = j
            })
            if (
              type === 'back' &&
              !configedPorts.includes(i.segmentList[0].startPortId)
            ) {
              configedPorts.push(i.segmentList[0].startPortId)
            }
          })
          type === 'back' && this.configedPortsList.push(configedPorts)
        })
        return newList
      },
      reload() {
        this.getBackDetail(true)
        this.needReload = true
      },
      close() {
        console.log('this.operateType', this.operateType)
        if (
          this.rowData.bizChannelList.length === 2 &&
          this.configedPortsList.some(i => i.length !== 2) &&
          this.operateType !== 'view'
        ) {
          this.doubleClose()
        } else {
          this.$emit('close', this.needReload)
        }
      },
      doubleClose() {
        this.$confirm(this.$t('DOUBLE_BACKUP_CLOSE'), {
          type: 'warning',
          confirmButtonText: this.$t('BACK'),
          cancelButtonText: this.$t('STILL_EXIT')
        })
          .then(() => {})
          .catch(() => {
            this.configedPortsList = []
            this.$emit('close', this.needReload)
          })
      }
    }
  }
</script>

<style scoped></style>
